<template>
  <div class="content-list">
    <ul class="section-content">
      <li
        v-for="(item, index) in contentList"
        :key="index"
        class="content-item"
        @click="toDisplayShow(item)"
      >
        <div class="kuo">
          <img class="item-img" :src="item.srcUrl" />
          <div class="mask">
            <svg class="icon">
              <use xlink:href="#icon-bofang"></use>
            </svg>
          </div>
        </div>
        <p class="item-name">
          {{ item.name || item.title }}
        </p>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
  import { useRouter } from 'vue-router';

  type ContentListType = Array<{
    name: string;
    title: string;
    srcUrl: string;
  }>;
  defineProps({
    contentList: Array as () => ContentListType,
  });
  const router = useRouter();
  const toDisplayShow = (item: any) => {
    // 跳转到对应的路由且将当前的参数插入
    console.log('----id', item);
    router.push({ name: 'play', params: { id: item.id } });
  };
</script>

<style lang="less">
  @import '@/assets/css/content-list.less';
</style>
